8.5 TruJS - A simple AngularJS-like data-view binding library

• trujs-init:
  • TruJS variables will be created with initial values.
  • Only in <span>
  • The value of this attribute is like a JavaScript expression that can be evaluated only once.
  • E.g., <span trujs-init="$trujs.a = 20; $trujs.b = 'Wow!'"></span> -> TruJS variables, a and b, will be created in $trujs as properties with the initial values. $trujs.a -> 20 and $trujs['b'] -> 'Wow!'.
• trujs-model:
  • TruJS variables will be created.
  • Only in <input>
  • All the TruJS variables start with '$trujs.', i.e., properties in $trujs.
  • E.g., <input type='text' trujs-model='x' value='10'> -> The input value will be modelled by $trujs.x with the initial value 10.
• trujs-bind:
  • Only in <span> for the convenience of implementation
  • This attribute is used to list which TruJS variables are used in a TruJS expression.
  • E.g., <span trujs-bind='a, b, c'> let d = 10; $trujs.a++; d + ", " + $trujs.b + ", " + $trujs.c </span> -> The TruJS expression, i.e., the content of <span>...</span>, will be initially evaluated and re-evaluated whenever there is any change in any one of a, b, and c.
  • If trujs-bind='' -> The TruJS expression will be evaluated only once in the beginning.

• Nothing but JS expressions; {{...}} not used
• Only in <span> that includes trujs-bind for the convenience of implement
• E.g., <span trujs-bind=...> let d = 10; $trujs.a++; d + " " + $trujs.b + " " + $trujs.c + " " + $trujs.x; </span>

• Two attributes, trujs-init and trujs-model, are used to describe TruJS variables (i.e., model).
• TruJS variables will be created in $trujs as properties.
• The attribute, trujs-bind, is used to describe which TruJS variables are bound to an output <span>.
• The content of an output <span> is a JavaScript code.
• <input trujs-init='x'> -> $trujs.x (or $trujs['x']) in JavaScript -> multiple <span trujs-bind='x...'>

<script src="https://cs.tru.ca/~mlee/comp4620/Software/TruJS.mo.js"></script>

<span trujs-init='$trujs.b = 20'></span>
<span trujs-init=''>$trujs.c = 30</span>
Case 1: <input type='text' trujs-model='x' value=''><br>
Case 2: <input type='text' trujs-model='y' value='TruJS'><br>
Case 3: <input type='text' trujs-model='z' value='Fun'><br>
<br>
<div>
Wow!<br><br>
Case 1: <span trujs-bind='x'>$trujs.x</span><br> <!-- '$trujs.x' to be evaluated whenever trujs.x is updated. -->
Case 2.1: <span trujs-bind='y'></span><br> <!-- no expression -->
Case 2.2: <span trujs-bind=''>$trujs.y</span><br> <!-- '$trujs.y' to evaluated only once because trujs-bind does not include y. -->
Case 2.3: <span >$trujs.y</span><br> <!-- no evaluation because trujs-bind is not defined. -->
Cases 1 and 3: <span trujs-bind='x, z'>let a = 10; $trujs.b++; a + ", " + $trujs.b + ", " + $trujs.c + ", " + $trujs.x + ", " + $trujs.z.toUpperCase()</span><br>
</div>

<!-- 
The next code is used just for testing. 
Without it, Trial 1 would not work, because the TruJS library scans all the elements only with the 'onload' event on 'window'.
-->
<script> $trujs_init(); </script>

• Data structures:

  $trujs = {};  // models and values; each model --> value; E.g., let model = 'a'; $trujs[model] = 20;
  $trujs._expressions = {};  // models and expressions; each model --> linear array of objects; 
                             //   each object, {output:..., expr:...}, includes 
                             //     output: span element object, and 
                             //     expr: JS expression that is the content of the span element
                             // E.g., $trujs._expressions[model].push({output:..., expr:...});  
  // E.g., $trujs['a'] -> 20;
  //       $trujs._expressions['a'] -> [{output:spanobj, expr:'$trujs.a += 20;'}, ...]
  

  
• After initialization,
• When there is a change(, i.e., 'keyup',) in a TruJS input, obtain the model name from trujs-model='m'.
      Update $trujs['m'] with the new value.
      For i = 0 to $trujs._expressions['m'].length - 1, evaluate $trujs._expressions['m'][i].expr, and
          assign the result to $trujs._expressions['m'][i].output.innerHTML.

1. Collection of models and initialization with trujs-init in <span>s
   • $trujs
   • $trujs._expressions
2. Collection of models with trujs-model in <input>s
   • $trujs
   • $trujs._expressions
3. Collection of models and expressions with trujc-bind in <span>s
   • $trujs._expressions
4. Initial evaluation of expressions
   • $trujs._expressions
5. Registration of 'keyup' event listeners on <input>s that include trujs-model. Update of the related model value, and evaluation of expressions related to the model.
   • $trujs
   • $trujs._expressions

• TruJS variables will become properties in a global variable, $trujs, in the TruJS library.
• Trial 2: Let's create some TruJS variables(, i.e., models,) directly.
  <button id='tr2-button-a'>Create TruJS variable named 'a' with initial value 10</button><br> <button id='tr2-button-b'>Create TruJS variable named 'b' with initial value 20</button><br> <button id='tr2-button-add'>Add the two variables and display the result using alert()!</button> <script> $trujs = {}; // each model --> value; $trujs.a can be used in expressions $trujs._expressions = {}; // each model -> array of {output:..., expr:...}s document.getElementById('tr2-button-a').addEventListener('click', function() { let model = 'a'; $trujs[???] = 10; }); ???? // for the 2nd button ???? // for the 3rd button </script> Submit

  
  
  


• Trial 2.1: Let's read TruJS variables from <span>s with trujs-init and save them in $trujs. Let's evaluate the expression in <span> that uses the two TruJS variables. How? eval()
  TruJS model a: <span id='tr2-1-model-a' trujs-init='$trujs.a = 10;'></span><br> TruJS model b: <span id='tr2-1-model-b' trujs-init='$trujs.b = 20;'></span><br> a + b = <span id='tr2-1-bind' trujs-bind='a, b'>$trujs.a + $trujs.b</span><br> <button id='tr2-1-button-read'>Read the above two TruJS models and save them!</button><br> <button id='tr2-1-button-add'>Add the two variables and display the result!</button> <script> $trujs = ???; // each model --> value $trujs._expressions = ???; // each model -> array of {output:..., expr:...}s document.getElementById('tr2-1-button-read').addEventListener('click', function() { eval(document.getElementById('tr2-1-model-a').???('trujs-init')); // Ahha!!! ???? // for the 2nd <span> alert(JSON.stringify($trujs)); }); document.getElementById('tr2-1-button-add').addEventListener('click', function() { document.getElementById('tr2-1-bind').innerHTML = ???? // for the 3rd <span>; Ahha!!! }); </script> Submit

  
  
  


• Trial 2.2: Let's read TruJS variables from <input>s with trujs-model and save them in $trujs.
  TruJS model a: <input id='tr2-2-model-a' trujs-model='a'><br> TruJS model b: <input id='tr2-2-model-b' trujs-model='b' value='20'><br> <button id='tr2-2-button-read'>Read the above two TruJS models and save them!</button><br> <button id='tr2-2-button-add'>Add the two variables and dislay the result</button> <script> ???? // each model --> value ????; // each model -> array of {output:..., expr:...}s document.getElementById('tr2-2-button-read').addEventListener('click', function() { let model = document.getElementById('tr2-2-model-a').???('trujs-model').trim(); $trujs[???] = document.getElementById('tr2-2-model-a').???; // Ahha!!! $trujs._expressions[???] = ???; // initialization; Ahha!!! ???? // for the 2nd <input> alert(JSON.stringify($trujs)); }); document.getElementById('tr2-2-button-add').addEventListener('click', function() { alert(???("???? + $trujs['b']")); // Ahha!!! }); </script> Submit

  
  
  


• Trial 2.4: Let's collect expressions from the <span>s that have trujs-bind.
  <div id='tr2-4-app'> a = <input id='tr2-4-model-a' trujs-model='a'><br> b = <input id='tr2-4-model-b' trujs-model='b' value='20'><br> a + b = <span id='tr2-4-bind' trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b)</span><br> </div> <script> // library ????; // each model --> value ????; // each model -- [] of {output:..., expr:...}s, i.e., pairs of output and expression function $trujs_update() { let iObj = document.getElementById('tr2-4-model-a'); let model = iObj.getAttribute('trujs-model').trim(); $trujs[model] = iObj.value; $trujs._expressions[model] = ???; ???? // for the 2nd <input> let oObj = document.getElementById('tr2-4-bind'); // for <span>; multiple models let models = ???? // ...split(/, */); Ahha!!! for (let i = 0; i < models.length; i++) $trujs._expressions[????].push(????); // *** } ???? // invoke $trujs_update() when the document is fully loaded; the 'load' event on window //---------------------------- // $trujs can be updated in app code as well $trujs_update(); alert(JSON.stringify($trujs)); </script> Submit

  
  
  

• TruJS expressions will be stored in $trujs, and they will be evaluated by using 'eval()'.
• Trial 3: Let's read a TruJS expression, evaluate it and display the result. Note that two models a and b are collected in $trujs in the previous Trial.
  <button id='tr3-read-expression'>Read TruJS expression and evaluate it!</button><br> <span id='tr3-expression'>$trujs['a'] + $trujs.b</span><br> <span id='tr3-result'>Result here!</span><br> <script> /* If you did not complete the above Trial, uncomment this so that you can complete this Trial without the previous Trial. $trujs = {}; $trujs.a = 10; $trujs.b = 20; */ document.getElementById('tr3-read-expression').addEventListener('click', function() { let expression = ????; let result = ????; // how to evaluate expression? alert(result); }); </script> Submit

  
  
  

• Inside the event listener,
      Get the model, e.g., m;
      Get the new value and update $trujs[m];
      For each expression in $trujs._expressions[m], evaluate expression and update the output;
• Trial 4: Let's add the step of initial evaluation of expressions in $trujs._expressions.
  <div id='tr4-app'> a = <input id='tr4-model-a' trujs-model='a'><br> b = <input id='tr4-model-b' trujs-model='b' value='20'><br> a + b = <span id='tr4-bind' trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b)</span><br> </div> <script> // library $trujs = {}; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression function $trujs_update() { // the step of collection of models let iObj = document.getElementById('tr4-model-a'); let model = iObj.getAttribute('trujs-model').trim(); $trujs[model] = iObj.value; // Ahha!!! $trujs._expressions[model] = []; // Ahha!! iObj = document.getElementById('tr4-model-b'); model = iObj.getAttribute('trujs-model').trim(); $trujs[model] = iObj.value; $trujs._expressions[model] = []; // the step of collection of expressions let oObj = document.getElementById('tr4-bind'); let models = oObj.getAttribute('trujs-bind').trim().split(/, */); // Ahha!!! for (let i = 0; i < models.length; i++) $trujs._expressions[models[i]].push({output: oObj, expr: oObj.innerHTML}); // Ahha!!! // the step of initial evaluation of expressions ???? // Ahha!!! } window.addEventListener('load', function() { $trujs_update(); }); // app // it is also possible $trujs_update(); </script> Submit

  
  
  


• Trial 5: Let's add event listeners for the <input>s that have trujs-model. Test the data-view binding by entering something in the <input>s.
  <div id='tr5-app'> a = <input id='tr5-model-a' trujs-model='a'><br> b = <input id='tr5-model-b' trujs-model='b' value='20'><br> a + b = <span id='tr5-bind' trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b)</span><br> </div> <script> // library $trujs = {}; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression function $trujs_update() { // the step of collection of models let iObj = document.getElementById('tr5-model-a'); let model = iObj.getAttribute('trujs-model').trim(); $trujs[model] = iObj.value; $trujs._expressions[model] = []; iObj = document.getElementById('tr5-model-b'); model = iObj.getAttribute('trujs-model').trim(); $trujs[model] = iObj.value; $trujs._expressions[model] = []; // the step of collection of expressions let oObj = document.getElementById('tr5-bind'); let models = oObj.getAttribute('trujs-bind').trim().split(/, */); for (let i = 0; i < models.length; i++) $trujs._expressions[models[i]].push({output: oObj, expr: oObj.innerHTML}); // the step of initial evaluation of expressions for (let m in $trujs._expressions) { for (let i = 0; i < $trujs._expressions[m].length; i++) $trujs._expressions[m][i].output.innerHTML = eval($trujs._expressions[m][i].expr); } // the step of registration of the 'keyup' event listern oneach model <input> ????.addEventListener('keyup', function() { // for the 1st model <input> ???? // update model for (let i = 0; i < $trujs._expressions[m].length; i++) // evalute expression and update the expression <span> ???? }); ???? // for the 2nd model <input> } window.addEventListener('load', function() { $trujs_update(); }); // app $trujs_update(); </script> Submit

  
  
  

• document.querySelectorAll() with attribute selectors
• Trial 6: Let's search TruJS inputs and outputs within <div id='tr6-app'>. Test the data-view binding by entering something in <input>s.
  <div id='tr6-app'> a = <input trujs-model='a'><br> b = <input trujs-model='b' value='20'><br> a + b = <span trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b)</span><br> </div> <script> // in library $trujs = {}; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression function $trujs_update() { // Step 1. Select the <span>s that include trujs-init, and initialize models ???? // Step 2. Select the <input>s that include trujs-model, and initialize models let inputs = ???? for (let i = 0; i < inputs.length; i++) { ???? } // Step 3. Select the <span>s that include trujs-bind, and add expressions to their corresponding models let outputs = ???? for (let i = 0; i < outputs.length; i++) { ???? } // Step 4. Initial evaluation - Evaluate expressions, and update outputs, i.e., <span>s that have trujs-bind for (let m in $trujs._expressions) { ???? } // Step 5. Select the <input>s that include trujs-model, and register 'keyup' event listeners // In the event listener, update the model, evaluate the related expressions, and update the related <span>s. for (let i = 0; i < inputs.length; i++) { ???? } } window.addEventListener('load', function() { $trujs_update(); }); // in app $trujs_update(); </script> Submit

  
  
  


• Trial 6.1: Step 1. Select the <span>s that include trujs-init, and initialize TruJS models
  <div id='tr6-1-app'> c = <span trujs-init='$trujs.c = 30'></span><br> a = <input trujs-model='a'><br> b = <input trujs-model='b' value='20'><br> a + b + c = <span trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b) + Number($trujs.c)</span><br> </div> <script> // in library $trujs = {}; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression function $trujs_update() { // Step1: Select the <span>s that include trujs-init, and initialize TruJS models let init_spans = document.querySelectorAll("span[trujs-init]"); for (let i = 0; i < init_spans.length; i++) eval(init_spans[i].getAttribute("trujs-init")); for (let p in $trujs) { if (p != "_expressions") // i.e., a model $trujs._expressions[p] = []; } } window.addEventListener('load', function() { $trujs_update(); }); // in app $trujs_update(); alert(JSON.stringify($trujs)); </script> Submit

  
  
  


• Trial 6.2: Step 2. Select the <input>s that include trujs-model, and initialize models
  <div id='tr6-2-app'> c = <span trujs-init='$trujs.c = 30'></span><br> a = <input trujs-model='a'><br> b = <input trujs-model='b' value='20'><br> a + b + c = <span trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b) + Number($trujs.c)</span><br> </div> <script> // in library // after Trial 6.1 $trujs = {}; $trujs['c'] = '30'; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression $trujs._expressions['c'] = []; function $trujs_update() { // Step2. Select the <input>s that include trujs-model, and initialize models let model_inputs = document.querySelectorAll("input[trujs-model]"); for (let i = 0; i < model_inputs.length; i++) { let model = ???? ???? // for value of the model in $trujs ???? // for expression of the model in $trujs._expressions } } //window.addEventListener('load', function() { // $trujs_update(); //}); // in app $trujs_update(); alert(JSON.stringify($trujs)); </script> Submit

  
  
  


• Trial 6.3: Step 3. Select the <span>s that include trujs-bind, and add expressions to their corresponding models
  <div id='tr6-3-app'> c = <span trujs-init='$trujs.c = 30'></span><br> a = <input trujs-model='a'><br> b = <input trujs-model='b' value='20'><br> a + b + c = <span trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b) + Number($trujs.c)</span><br> </div> <script> // in library // after Trials 6.1 and 6.2 $trujs = {}; $trujs['a'] = ''; $trujs['b'] = '20'; $trujs['c'] = '30'; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression $trujs._expressions['a'] = []; $trujs._expressions['b'] = []; $trujs._expressions['c'] = []; function $trujs_update() { // Step 3. Select the <span>s that include trujs-bind, and add expressions to their corresponding models let bind_spans = document.querySelectorAll("span[trujs-bind]"); for (let i = 0; i < bind_spans.length; i++) { let models = bind_spans[i].getAttribute("trujs-bind").trim().split(/, */); for (let m = 0; m < models.length; m++) { let model = models[m]; let output_expr = { ???? }; // object for the output <span> and expression in the <span> ???? // keep it in $trujs._expressions for model } } } //window.addEventListener('load', function() { // $trujs_update(); //}); // in app $trujs_update(); alert(JSON.stringify($trujs)); </script> Submit

  
  
  


• Trial 6.4: Step 4. Initial evaluation - Evaluate expressions, and update outputs, i.e., <span>s that have trujs-bind
  <div id='tr6-4-app'> c = <span trujs-init='$trujs.c = 30'></span><br> a = <input trujs-model='a'><br> b = <input trujs-model='b' value='20'><br> a + b + c = <span id='tr6-4-span' trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b) + Number($trujs.c)</span><br> </div> <script> // in library // after Trials 6.1 ~ 6.3 $trujs = {}; $trujs['a'] = ''; $trujs['b'] = '20'; $trujs['c'] = '30'; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression var obj_span = document.getElementById('tr6-4-span'); $trujs._expressions['a'] = [{output:obj_span, expr:"Number($trujs.a) + Number($trujs.b) + Number($trujs.c)"}]; $trujs._expressions['b'] = [{output:obj_span, expr:"Number($trujs.a) + Number($trujs.b) + Number($trujs.c)"}]; $trujs._expressions['c'] = []; function $trujs_update() { // Step 4. Initial evaluation - Evaluate expressions, and update outputs, i.e., <span>s that have trujs-bind let bind_spans = document.querySelectorAll("span[trujs-bind]"); for (let i = 0; i < bind_spans.length; i++) { bind_spans[i].innerText = eval(bind_spans[i].innerText); } } //window.addEventListener('load', function() { // $trujs_update(); //}); // in app $trujs_update(); alert(JSON.stringify($trujs)); </script> Submit

  
  
  


• Trial 6.5: Step 5. Select the <input>s that include trujs-model, and register 'keyup' event listeners. Type a number in <input>s and see the output <span> is changed together. (Note that the output <span> may not be evaluated if Step 5 has not been completed.)
  <div id='tr6-5-app'> c = <span trujs-init='$trujs.c = 30'></span><br> a = <input trujs-model='a'><br> b = <input trujs-model='b' value='20'><br> a + b + c = <span id='tr6-5-span' trujs-bind='a, b'>Number($trujs.a) + Number($trujs.b) + Number($trujs.c)</span><br> </div> <script> // in library // after Trials 6.1 ~ 6.4 $trujs = {}; $trujs['a'] = ''; $trujs['b'] = '20'; $trujs['c'] = '30'; // each model --> value $trujs._expressions = {}; // each model -- [] of {output:..., expr:...}, i.e., a pair of output and expression var obj_span = document.getElementById('tr6-5-span'); $trujs._expressions['a'] = [{output:obj_span, expr:"Number($trujs.a) + Number($trujs.b) + Number($trujs.c)"}]; $trujs._expressions['b'] = [{output:obj_span, expr:"Number($trujs.a) + Number($trujs.b) + Number($trujs.c)"}]; $trujs._expressions['c'] = []; function $trujs_update() { // Step 5. Select the <input>s that include trujs-model, and register 'keyup' event listeners // In the event listener, update the model, evaluate the related expressions, and update the related <span>s. let model_inputs = document.querySelectorAll("input[trujs-model]"); for (let i = 0; i < model_inputs.length; i++) { model_inputs[i].addEventListener('keyup', function() { let model = this.getAttribute('trujs-model').trim(); $trujs[model] = ???? for (let j = 0; j < $trujs._expressions[model].length; j++) { let output_span = ???? let expr = ???? ???? // update the output <span> with the evaluation result } }); } } //window.addEventListener('load', function() { // $trujs_update(); //}); // in app $trujs_update(); alert(JSON.stringify($trujs)); </script> Submit

  
  
  

• Tricks for trujs-init

  function $trujs_update() 
  {
      // Step1: Select the <span>s that include trujs-init, and initialize TruJS models
      let init_spans = document.querySelectorAll("span[trujs-init]");
      for (let i = 0; i < init_spans.length; i++) {
          let init_models = init_spans[i].getAttribute("trujs-init").trim().split(/; */);   
          for (let j = 0; j < init_models.length; j++) {
              if (!init_models[j].startsWith("_expressions")) {
                  let str = "$trujs." + init_models[j].trim();  // Ahha! "$trujs." is attached.
                  eval(str);
              }
          }
      }        
      for (let p in $trujs) {
          if (p != "_expressions")  // i.e., a model
              $trujs._expressions[p] = [];
      }
  }
  



• Tricks for expressions (not perfect though; what if a model is changed in an expression?)

  function $trujs_update() 
  {
      // Step 4. Initial evaluation
      //         The same idea in Step 5 can be used.
      
      // Step 5. Select the <input>s that include trujs-model, and register 'keyup' event listeners
      //         In the event listener, update the model, evaluate the related expressions, and update the related s.
      let model_inputs = document.querySelectorAll("input[trujs-model]");
      for (let i = 0; i < model_inputs.length; i++) {
          model_inputs[i].addEventListener('keyup', function() {
              let model = this.getAttribute('trujs-model').trim();
              $trujs[model] = ????
              for (let j = 0; j < $trujs._expressions[model].length; j++) {
                  let output_span = ????
                  let expr = "{";
                  for (let p in $trujs)
                      if (p != "_expressions")
                          expr += `let ${p} = '${$trujs[p]}';`;  // Ahha! New local variables with all the models in $trujs
                  expr += $trujs._expressions[model][j].expr;  // Ahha! The variables here will use those declared above.
                  expr += "}";
                  ????  // upate the output  with the evaluation result
              }
          });
      }
  }